<template>
  <div class="topNav">
    <div class="head">
      <ul class="ul1">
        <template v-if="userinfo.account">
          <li>
            <a href="javascript:;"
              ><i class="iconfont icon-user"></i
              >{{ $store.state.user.userinfo.account }}</a
            >
          </li>
          <li>
            <a @click="logout()">
              <router-link to="/login">退出登录</router-link>
            </a>
          </li>
        </template>
        <template v-else>
          <li>
            <router-link to="/login">请先登录</router-link>
          </li>
          <li><a href="javascript:;">免费注册</a></li>
        </template>

        <li>我的订单</li>
        <li>会员中心</li>
        <li>帮助中心</li>
        <li>关于我们</li>
        <li class="lis">
          <img src="@/assets/手机 (1).png" alt="" />
          手机版
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    userinfo() {
      return this.$store.state.user.userinfo;
    },
  },
  methods: {
    logout() {
      // this.$store.commit("user/setUser", {});
      this.$store.commit("user/setUser", {});
      this.$store.commit("cart/clearList");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";

@mixin set($color) {
  color: $color;
}

li:hover {
  @include set($xtxColor);
}

.head {
  width: 100%;
  height: 53px;
  background-color: black;
  color: #cdcdcd;

  ul {
    display: flex;
    height: 53px;
    align-items: center;
    // list-style: none;
    justify-content: flex-end;
    img {
      // width: 14px;
      height: 19.6px;
      margin-top: 2.2px;
    }
    li {
      width: 120px;
      height: 19.6px;
      border-left: 2px solid #666;
      padding: 0 5px;
      line-height: 1.4;
      display: inline-block;
      text-align: center;
    }
    .lis {
      display: flex;
      align-items: center;
      padding: 0 0 0 17px;
      text-align: right;
    }
    .li1 {
      border: none;
    }
    a {
      color: rgb(205, 205, 205);
    }
  }
  .ul1 {
    width: 1240px;
    margin: auto;
    box-sizing: border-box;
  }
}
</style>
